<template>
  <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight" mode="out-in"  :duration="500">
    <div  class="userInfo" v-if="ishowInfo">
      <div class="close" @click="closeInfo">
        <i class="fa fa-times fa-4x" aria-hidden="true"></i>
      </div>
      <div class="head">
        <el-form ref="form" :model="form" :rules="rules"    label-position="top"  class="form">
          <!--图片-->
         <!-- <div class="el-form-item is-required" :class="{ 'is-error': validate.error }" >
              <input type="file" value="上传图片" class="avatar-input" accept="*.png,*.jpg,*.jpeg,*gif"  @change.stop="addAvatar">
              <span class="avatar"  :style="{ backgroundImage: 'url(' + this.imgUrl + ')'}">
              </span>
              <div v-if="validate.error" class="el-form-item__error">图片怎能没有内容呢？</div>我的头像~
          </div>-->
          <!--图片-->
          <div class="el-form-item is-required" :class="{ 'is-error': validate.error }" >
            <label class="el-form-item__label">头像</label>
            <qsj-pic-selected
              ref="picRef"
              :deviceVersions="deviceVersions"
              :oldimgs="imgs"
              :maxCount="1"
              :picWidth="width"
            >
            </qsj-pic-selected>
            <div v-if="validate.error" class="el-form-item__error">图片怎能没有内容呢？</div>
          </div>
          <el-form-item  prop="sex">
            <label class="el-form-item__label">性别</label>
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item  prop="age">
            <label class="el-form-item__label">年龄</label>
            <el-input v-model.number="form.age" placeholder="不老，我一点都不老"></el-input>
          </el-form-item>
          <el-form-item  prop="note">
            <label class="el-form-item__label">个性签名</label>
            <el-input v-model="form.note" placeholder="请输入你的签名"></el-input>
          </el-form-item>
          <el-form-item prop="money">
            <label class="el-form-item__label">简币</label>
            <el-input v-model.number="form.money" placeholder="你想充多少简币呢" :disabled="true"></el-input>
          </el-form-item>
          <div class="oprator right">
            <el-button class="submit" type="primary" @click="submit" @keyup.enter="submit">确定</el-button>
          </div>
        </el-form>
      </div>

    </div>
  </transition>
</template>
<script>
  import lrz from 'lrz'
  import qsjPicSelected from "@/components/qsjPicSelected"
    export default {
        name: "set-user-info",
      data () {
        const id = this.$route.params.id;//当前用户的参数
        return {
          user:null,
          value:'',
          imgUrl:'',
          ishowInfo:true,
          deviceVersions:'pc',
          returnData:null,
          imgs:[],
          newImgs:[],
          width:'8vw',
          form: {
            age: '',
            sex:'',
            note:'',
            money:''
          },
          rules: {
            age: [
              { required: true, message: "必须填写性别哦!", trigger: 'blur' },
            ],
            sex: [
              { required: true, message: "必须填写年龄哦!", trigger: 'blur' },
            ],
            note: [
              { required: true, message: "必须填写个性签名哦!", trigger: 'blur' },
            ],

          },

          validate: {
            error: false
          }
        };
      },
      components:{
        qsjPicSelected
      },
      methods:{
        closeInfo() {
          this.$router.push({path: '/user/'+this.$route.params.id});

        },
        addAvatar() {
          let that = this;
          lrz(event.currentTarget.files[0])
            .then(function (rst) {
              that.imgUrl = rst.base64;
              console.log("图片")
              console.log( that.imgUrl )
            })
            .catch(function (err) {
              this.$message.error('错了哦。');
            });
        },
        getCurrentUser(){
          this.returnData = this.$refs.picRef.returnData();
          this.newImgs=this.$refs.picRef.returnData().newImgs;
          const id = this.$route.params.id;
          let q = new this.$api.SDK.Query('_User');
          q.get(id).then((user) => {
            this.user = user;
            console.log("______________________________")
            console.log(this.user)
            user.set('sex', this.form.sex);
            user.set('note', this.form.note);
            user.set('age', this.form.age);
            user.set('money', this.form.money);
            user.set('avatar', this.newImgs);
            user.save().then((user) => {
              console.log("____**********************_")
              console.log(this.user)
            }).catch(console.error);
            this.$message.success('编辑成功');
          }).catch(console.error);
        },
        submit(){
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.getCurrentUser()
            } else {
              console.log('error submit!!');
              this.$message.error('错了哦，您填写的信息有错误，请按照提示修改。');
              return false;
            }
          })
        },
      },
  /*    watch: {
        '$route' (to, from) {
          if(from.name ==='setUserInfo'&& to.name ==='User'){
            this.$router.replace({path: '/user/'+this.id});
          }
        }
      },*/
    }
</script>

<style  lang="less" scoped>
  @import "~vue2-animate/src/vue2-animate.less";
    .userInfo{
      position: fixed;
      top: 0;
      z-index: 200;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #B0C4DE;
      margin:  0 auto;
      text-align: center;
      border: 1px solid black;
      .close{
        color: #ffffff;
        position: absolute;
        top: 0;
        text-align: right;
        margin-top: 20px;
        margin-left: 70%;

      }
      .head{
        width: 80%;
        margin: 0 auto;
        text-align: center;
        margin-top: 20px;
      }

    }
  .el-form-item__label{
    color: #ffffff!important;
    width: 100px;
  }
  .avatar-input{
    width: 100%;
    cursor: pointer;
  }
  .avatar{
    display: inline-block;
    width: 70px;
    height: 70px;
    background-size: cover;
    border-radius: 50%;
    box-shadow:  0 0 1px black;
    color: #cccccc;
  }
  .el-input{
    width: 250px;
  }
  .form{
    display: flex;
    align-items:flex-start;
    justify-content: space-between;
    flex-direction: column;
  }
  .el-button{
    margin-top: 40px;
    background-color: #ffffff;
    color: black;
  }
  .fa{
    color: #ffffff;
  }
</style>
